/*
 * @Author: wangtao
 * @Date: 2020-06-29 16:32:41
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-04-22 15:23:11
 * @Description: file content
 */

import React, { Component } from 'react';
import { StyleSheet, View, Text, Image } from 'react-native';
import moment from 'moment';
import {
  mainBgColorWhite,
  screenWidth,
  px2dp,
  fontColorDeepGray,
  fontColorBlack,
  fontColorCoffee,
  fontColorRed,
} from '@/styles';
import {
  iconAirplaneRed,
  iconAirplaneCoffee,
} from '@/images';

export default class ApplyTitle extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {}

  render() {
    const { applicationInsuranceDetail } = this.props;

    return (
      <View style={styles.itemContent}>
        <View style={styles.itemLeft}>
          <View style={styles.labelWrap}>
            <Text style={styles.label}>车 牌 号：</Text>
            <Text style={styles.labelValue}>
              {applicationInsuranceDetail.carNo || '-'}
            </Text>
          </View>
          <View style={styles.labelWrap}>
            <Text style={styles.label}>提交时间：</Text>
            <Text style={styles.labelValue}>
              {applicationInsuranceDetail.updateTime
                ? moment(applicationInsuranceDetail.updateTime).format(
                  'YYYY.MM.DD HH:mm',
                )
                : '-'}
            </Text>
          </View>
        </View>
        <View style={styles.itemRight}>
          <View style={{ alignItems: 'center' }}>
            {this._renderStatus(applicationInsuranceDetail.applicationStatus)}
          </View>

          {/* <Image
            source={iconSuccessTextGreen}
            style={styles.iconTextImg}
            resizeMode="stretch"
          />  */}
        </View>
      </View>
    );
  }

  _renderStatus = (applicationStatus) => {
    if (!applicationStatus) {
      return null;
    }
    switch (applicationStatus.code) {
    // 未提交
    case 'NOT_SUBMITTED':
      return (
        <>
          <Image
            source={iconAirplaneRed}
            style={styles.iconAirImg}
            resizeMode='stretch'
          />
          <Text style={styles.iconStatusText}>{applicationStatus.name}</Text>
        </>
      );
      // 已提交
    case 'SUBMITTED':
      return (
        <>
          <Image
            source={iconAirplaneCoffee}
            style={styles.iconAirImg}
            resizeMode='stretch'
          />
          <Text style={[styles.iconStatusText, { color: fontColorCoffee }]}>
            {applicationStatus.name}
          </Text>
        </>
      );
    default:
      return (
        <>
          <Image
            source={iconAirplaneCoffee}
            style={styles.iconAirImg}
            resizeMode='stretch'
          />
          <Text style={[styles.iconStatusText, { color: fontColorCoffee }]}>
            已提交
          </Text>
        </>
      );
    }
  };
}
const styles = StyleSheet.create({
  itemContent: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingVertical: px2dp(32),
    paddingHorizontal: px2dp(32),
    backgroundColor: mainBgColorWhite,
    width: screenWidth,
  },
  labelWrap: {
    flexDirection: 'row',
    paddingVertical: px2dp(8),
  },
  label: {
    color: fontColorDeepGray,
    fontSize: px2dp(30),
  },
  labelValue: {
    color: fontColorBlack,
    fontSize: px2dp(30),
    fontWeight: 'bold',
  },
  iconAirImg: {
    width: px2dp(40),
    height: px2dp(40),
  },
  iconTextImg: {
    width: px2dp(169),
    height: px2dp(114),
  },
  iconStatusText: {
    fontSize: px2dp(24),
    fontWeight: 'bold',
    color: fontColorRed,
    marginTop: px2dp(12),
  },
});
